<template>
  <div class="add-variable">
    <div class="tag">
      <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
        @click="tagClick"
      >
        {{ tag }}
      </el-tag>
    </div>
    <el-form
      ref="currentVariableInfo"
      :model="currentVariableInfo"
      label-width="80px"
    >
      <el-form-item label="变量名称">
        <el-input
          v-model="currentVariableInfo.varName"
          :disabled="varIsFreeze"
        ></el-input>
      </el-form-item>
      <el-form-item label="变量值预览">
        <el-input
          v-model="currentVariableInfo.varText"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="高级query">
        <el-input
          v-model="currentVariableInfo.varSelector"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveVariable">保存变量</el-button>
        <el-button @click="cancleSaveVar">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'addVariable',
  props: {
    domData: {
      type: Object,
      default: {
        domTree: '',
        domText: '',
        domCount: '',
        xpath: ''
      }
    },
    varIsFreeze: {
      type: Boolean,
      default: true
    }
  },
  data () {
    console.log('ssss', this.$store.state.curVarible.domData);
    return {
      currentVariableInfo: {
        varName: '',
        varText: '',
        varSelector: this.domData.domTree || ''
      },
      varSumArr: [],
      dynamicTags: []
    }
  },
  watch: {
    domData: {
      handler (newValue) {
        console.log(newValue);
        this.currentVariableInfo.varSelector = newValue.domTree
        this.currentVariableInfo.varText = newValue.domText
      },
      deep: true
    }
  },
  methods: {
    cancleSaveVar () {
      const ariaIframe = document.getElementById('id-iframe-aria-ur1')
      ariaIframe.contentWindow.postMessage({
        code: 'UNFREEZE',
        fromAriaAdmin: true
      }, '*')
      this.currentVariableInfo = {
        varName: '',
        varText: '',
        varSelector: ''
      }
    },
    saveVariable () {
      let tempFlag = 0
      this.varSumArr.forEach((item) => {
        if (item.varName = this.varName) {
          tempFlag = 1
        }
      })
      if (tempFlag) return this.$message('变量名重复')
      this.varSumArr.push(this.currentVariableInfo)
      this.$emit('varSumArrFun', this.varSumArr)
      this.dynamicTags.push(this.currentVariableInfo.varName)
      // 解锁焦点
      const ariaIframe = document.getElementById('id-iframe-aria-ur1')
      ariaIframe.contentWindow.postMessage({
        code: 'UNFREEZE',
        fromAriaAdmin: true
      }, '*')
      // this.$store.commit('setVarName', this.currentVariableInfo.varName)
      this.$store.commit('setCurVarible', this.currentVariableInfo)
      this.currentVariableInfo = {
        varName: '',
        varText: '',
        varSelector: ''
      },
        // this.currentVariableInfo.varName = ''
        console.log(this.varSumArr);
      console.log('saveVariable');
    },
    tagClick (value) {
      console.log(value.target.innerText);
      const curVar = this.varSumArr.filter((item) => {
        return item.varName = value.target.innerText
      })
      this.currentVariableInfo = curVar[0]
    },
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
  }
}
</script>

<style scoped>
::v-deep .tag {
  /* margin-bottom: 8px;
  margin-left: 20px; */
}
.el-tag {
  margin-right: 10px;
  margin-bottom: 8px;
}
</style>